<template>
  <el-container class="layout-container">
    <!-- 页眉 -->
    <el-header class="layout-header">
      <div class="header-left">
        <i class="el-icon-s-home logo-icon"></i>
        <span class="logo-text">商家端</span>
      </div>

      <div class="header-right">
        <!-- 使用 el-dropdown 包裹头像 -->
        <el-dropdown trigger="click">
          <span class="avatar-dropdown">
            <el-avatar size="medium"
                       :src="getAvatar || '/default-avatar.png'"></el-avatar>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <el-container>
      <!-- 侧边导航栏 -->
      <el-aside width="200px"
                class="layout-aside">
        <el-menu :default-active="$route.path"
                 :router="true"
                 class="el-menu-vertical-demo"
                 background-color="#fff"
                 text-color="#333"
                 active-text-color="#409EFF">
          <!-- 店铺管理 -->
          <el-submenu index="/shop">
            <template slot="title">
              <i class="el-icon-data-line"></i><span>店铺管理</span>
            </template>
            <el-menu-item index="/shop/info">店铺信息</el-menu-item>
            <el-menu-item index="/shop/deliveryFee">配送费规则</el-menu-item>
          </el-submenu>

          <!-- 商品管理 -->
          <el-submenu index="/product">
            <template slot="title">
              <i class="el-icon-menu"></i><span>商品管理</span>
            </template>
            <el-menu-item index="/product/product">商品详情管理</el-menu-item>
            <el-menu-item index="/product/category">商品分类管理</el-menu-item>
          </el-submenu>

          <!-- 订单管理 -->
          <el-submenu index="/order">
            <template slot="title">
              <i class="el-icon-notebook-2"></i><span>订单管理</span>
            </template>
            <el-menu-item index="/order/all">全部订单</el-menu-item>
            <el-menu-item index="/order/after-sale">订单售后</el-menu-item>
          </el-submenu>

          <!-- 财务管理 -->
          <el-submenu index="/finance">
            <template slot="title">
              <i class="el-icon-coin"></i><span>财务管理</span>
            </template>
            <el-menu-item index="/finance/income">店铺收入</el-menu-item>
            <el-menu-item index="/finance/withdrawal">收入提现</el-menu-item>
          </el-submenu>

          <!-- 评价管理 -->
          <el-submenu index="/appraise">
            <template slot="title">
              <i class="el-icon-user"></i><span>评价管理</span>
            </template>
            <el-menu-item index="/appraise/view">评价查看</el-menu-item>
            <el-menu-item index="/appraise/trend">评价趋势</el-menu-item>
          </el-submenu>

          <!-- 消息中心 -->
          <el-submenu index="/message">
            <template slot="title">
              <i class="el-icon-user"></i><span>消息中心</span>
            </template>
            <el-menu-item index="/message/platform">平台消息</el-menu-item>
            <el-menu-item index="/message/customer">用户消息</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 内容区 -->
      <el-main class="layout-main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

import { removeToken } from '@/util/cookie';
import { logout } from '@/api/login';

export default {
  name: "Layout",

  methods: {

    /** 退出登录 */
    logoutHandle () {
      logout().then(res => {
        if (res.code == 200) {
          this.$store.dispatch("user/logOut");
          removeToken();
          this.$router.push('/')
          this.$message.success("退出登录")
        }
      })
    }
  },

  computed: {
    getAvatar () {
      return this.$store.state.user.avatar;
    }
  }
};
</script>

<style scoped>
.layout-container {
  height: 100vh;
  background-color: #f7f8fa;
}

/* 顶部栏 */
.layout-header {
  background-color: #fff;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.header-left {
  display: flex;
  align-items: center;
}
.logo-icon {
  font-size: 20px;
  margin-right: 8px;
  color: #409eff;
}
.logo-text {
  font-size: 16px;
  font-weight: bold;
}
.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
}

.avatar-dropdown {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.el-avatar {
  border-radius: 50%;
}
/* 侧边栏 */
.layout-aside {
  background-color: #fff;
  border-right: 1px solid #ebeef5;
}
.el-menu {
  border-right: none;
}
.el-submenu__title {
  font-weight: 500;
}
.el-menu-item {
  padding-left: 40px !important; /* 缩进感 */
}
.el-menu-item.is-active {
  background-color: #ecf5ff !important;
  border-right: 3px solid #409eff;
}

/* 内容区 */
.layout-main {
  background: #f7f8fa;
  padding: 20px;
  overflow-y: auto;
}
</style>
